<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			color: white;
		}

		.parent {
			width: 100%;

			/* 第三步 ，溢出隐藏 */
			overflow: hidden;
		}

		/* 伪等高实现 */
		.left,
		.right {
			width: 50%;

			/* 第一步 浮动，排成一排 */
			float: left;
			/* 第二步，内填充，足够大 9999px */
			padding-bottom: 9999px;
			/* 再给外边距，用来抵消内填充 */
			margin-bottom: -9999px;
		}

		.left {
			background: #c00;
		}

		.right {
			background: #0e0;
		}
	</style>
</head>

<body>
	<div class="parent">
		<div class="left">Hello World</div>
		<div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam cum laudantium consequuntur
			officia
			facilis sit unde quisquam, consequatur quidem libero voluptatem porro quasi repellendus iure hic delectus
			perferendis recusandae.
			Asperiores laborum quia dolorem ut at alias voluptates impedit recusandae ullam quisquam incidunt, vel quos.
		</div>
	</div>
</body>

</html>